<template>
    <div>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="旧密码" prop="loginPwd">
                <el-input v-model="ruleForm.loginPwd" show-password placeholder="请输入旧密码"></el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="NewloginPwd">
                <el-input v-model="ruleForm.NewloginPwd" show-password placeholder="新密码"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="warning" plain @click="submitForm('ruleForm')">更新</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import basepath from '@/plugins/base.js'
import { mapMutations } from "vuex";
export default {
    nam: 'UpdPwd',
    data() {
        return {
            baseapi: '',
            baseImg: '',
            ruleForm: { loginPwd: null, NewloginPwd: null },
            rules: {
                loginPwd: [{
                    required: true,
                    message: '请输入旧密码',
                    trigger: 'blur'
                }],
                NewloginPwd: [{
                    required: true,
                    message: '请输入新密码',
                    trigger: 'blur'
                }],
            }
        }
    },
    methods: {
        ...mapMutations(["setUser"]),
        //重置表单
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        //提交表单
        submitForm(formName) {
            console.log(formName)
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.axios({
                        method: 'get',
                        url: 'Users',
                        params: { id: this.data, pwd: this.ruleForm.loginPwd },
                        headers: {
                            Authorization: sessionStorage.getItem('token'),
                            'Content-Type': 'application/json'
                        }
                    }).then(res => {
                        console.log(res);
                        if (res.data.code > 0) {
                            this.axios({
                                method: 'put',
                                url: 'Users',
                                params: { id: this.data, pwd: this.ruleForm.NewloginPwd },
                                headers: {
                                    Authorization: sessionStorage.getItem('token'),
                                    'Content-Type': 'application/json'
                                }
                            }).then(res => {
                                console.log(res);
                                if (res.data.code > 0) {
                                    this.$notify({
                                        title: '成功',
                                        message: res.data.msg,
                                        type: 'success'
                                    });
                                    this.$emit("change", false);
                                    this.$alert('密码已更改，即将退出登录！', '提示', {
                                        confirmButtonText: '确定',
                                        callback: action => {
                                            console.log(action)
                                            sessionStorage.clear();
                                            this.setUser({
                                                UserId: null,
                                                loginName: null,
                                                loginPwd: null,
                                                UserName: null,
                                                Roles: null,
                                                RoleName: null,
                                                DeptName: null,
                                                imgPath: null,
                                                Token: null,
                                                Exp: null,
                                                sex: null,
                                                birthday: null,
                                                phone: null,
                                                imgID: null,
                                                lastTime: null,
                                                status: null,
                                            });
                                            location.href = "/login";
                                        }
                                    });
                                } else {
                                    this.$notify.error({
                                        title: '提示',
                                        message: res.data.msg
                                    });
                                }
                            }).catch(err => {
                                console.log('err: ', err);
                            })
                        } else {
                            this.$notify.error({
                                title: '提示',
                                message: res.data.msg
                            });
                        }
                    }).catch(err => {
                        console.log('err: ', err);
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
    },
    model: {
        prop: "dialogFormVisible",
        event: "change",
    },
    props: {
        dialogFormVisible: Boolean,
        data: Object,
    },
    created() {
        this.baseapi = basepath.apiUrl;
        this.baseImg = basepath.imgUrl;
        console.log(this.data);
    }
}
</script>